<template>
	<h2 class="header">育儿知识</h2>
	<view class="page">
		<view class="first-row">	
			<uni-data-select v-model="value" :localdata="range" @change="change" class="first-row-left"></uni-data-select>
			<view class="first-row-right">
				<uni-icons type="search" size="24" class="search-icon"></uni-icons>
				<input class="input" placeholder="搜索育儿知识" />
			</view>	
		</view>
			
		<image src="../../../static/uni.png" class="knowledge-image" ></image>
		<view class="knowledge-title">科学喂养</view>
		<view class="row-item" >
			<view class="col-1">
				<button class="sign-button" plain="true"><text class="text-1">奶粉喂养</text></button>
			</view>
			<view class="col-2">
				<button class="sign-button" plain="true"><text class="text-2">食材挑选</text></button>
			</view>
			<view class="col-3">
				<button class="sign-button" plain="true"><text class="text-3">断奶</text></button>			
			</view>		
		</view>
		<view class="row-item" >
			<view class="col-1">
				<button class="sign-button" plain="true"><text class="text-1">奶粉喂养</text></button>
			</view>
			<view class="col-2">
				<button class="sign-button" plain="true"><text class="text-2">食材挑选</text></button>
			</view>
			<view class="col-3">
				<button class="sign-button" plain="true"><text class="text-3">断奶</text></button>			
			</view>		
		</view>
		<view class="row-item" >
			<view class="col-1">
				<button class="sign-button" plain="true"><text class="text-1">奶粉喂养</text></button>
			</view>
			<view class="col-2">
				<button class="sign-button" plain="true"><text class="text-2">食材挑选</text></button>
			</view>
			<view class="col-3">
				<button class="sign-button" plain="true"><text class="text-3">断奶</text></button>			
			</view>		
		</view>

		<view class="knowledge-title">辅食添加</view>
		<view class="row-item" >
			<view class="col-1">
				<button class="sign-button" plain="true"><text class="text-1">奶粉喂养</text></button>
			</view>
			<view class="col-2">
				<button class="sign-button" plain="true"><text class="text-2">食材挑选</text></button>
			</view>
			<view class="col-3">
				<button class="sign-button" plain="true"><text class="text-3">断奶</text></button>			
			</view>		
		</view>
		<view class="row-item" >
			<view class="col-1">
				<button class="sign-button" plain="true"><text class="text-1">奶粉喂养</text></button>
			</view>
			<view class="col-2">
				<button class="sign-button" plain="true"><text class="text-2">食材挑选</text></button>
			</view>
			<view class="col-3">
				<button class="sign-button" plain="true"><text class="text-3">断奶</text></button>			
			</view>		
		</view>
	</view>
</template>
<script setup>

</script>
<style scoped>
.page{
	padding: 0rpx 30rpx;
}
.header {
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	padding: 18rpx 30rpx;
	border-bottom: 6rpx solid #f2f2f2;
}	
.first-row{
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
}

.first-row-left {
	flex: 0.4;
}

.first-row-right{
	flex: 1;
	display: flex;
	justify-content: space-between;
	background-color: #f2f2f2;
	border-radius: 30rpx;
	margin-left: 30rpx;
}
.search-icon{
	display: flex;
	align-items: center;   
}
.input{
	height: 70rpx;
}
.knowledge-image{
	margin: 30rpx 30rpx;
	height: 260rpx;
}
.knowledge-title{
	font-size: 36rpx;
	text-align: center;
	margin: 30rpx 0rpx;
}
.sign-button {
	width: 100px;
	height: 30px;
	line-height: 60rpx;
	font-size: 14px;
	color: #666EE8;
	background-color: #F0F1FD;
	border-color: #fff;
	margin: 0;
	padding: 0;
	/* text-align: center; */
}
.row-item{
	/* position: relative; */
	/* background-color: #666EE8; */
	/* margin: 50rpx 0rpx; */
	display: flex;
	justify-content: space-around; 
	margin-bottom: 20rpx;
}
.col-1{
	/* position: absolute;
	left: 30rpx; */
}
.col-2{
	/* position: absolute;
	left: 260rpx; */
}
.col-3{
	/* position: absolute;
	right: 50rpx; */
}
</style>
